<template>
  <ElFormItem
    :label="titleText(options, item)"
    :prop="[childIndex, 'value']"
    :rules="{
      required: item.isRequired === 'Y',
      message: '请选择',
      trigger: 'change',
    }"
    class="flex_column"
  >
    <p v-if="options.showDesc" class="desc f12 mb10">
      {{ options.description }}
    </p>
    <ElRadioGroup
      v-model="item.value"
      :disabled="type === 'view'"
      @change="onChange"
    >
      <ElRow>
        <template
          v-for="radio in item.itemOptResList"
          :key="radio.itemOptionId"
        >
          <ElCol
            v-if="radio.show"
            :span="24 / (options.optionCol || 1)"
            class="pre_wrap"
          >
            <ElRadio v-if="radio?.isOther === 'Y'" :label="radio.optionName">
              {{ radio.optionName }}
              <ElInput
                v-model="radio.otherValue"
                :disabled="type === 'view'"
                class="other_input"
              />
            </ElRadio>
            <ElRadio v-else :label="radio.optionName"
            >{{ radio.optionName }}
            </ElRadio>
          </ElCol>
        </template>
      </ElRow>
    </ElRadioGroup>
  </ElFormItem>
</template>

<script setup>
import { titleText } from "@/utils/common.js";
import {
  ElCol,
  ElFormItem,
  ElInput,
  ElRadio,
  ElRadioGroup,
  ElRow,
} from "element-plus";
import { } from "vue";

//defineOptions({ name: "PCRadio" });

const { item, type, index, childIndex } = defineProps([
  "item",
  "type",
  "index",
  "childIndex",
]);
const emits = defineEmits(["change"]);
const { options } = JSON.parse(item.vformJson);
// 传递值改变后
const onChange = () => emits("change", item);

// 校验
// const validate = (rule, value, callback) => {
//   if (value === '') callback(new Error('请输入'))
//   else  callback()
// }
</script>